<template>
  <div class="check-order">
    <Index />
    <div class="content">
      <!-- 标题 -->
      <div class="head">
        <div class="title">
          <span class="title-left">AI智能 #</span>
          <span class="title-right">预定最佳机票</span>
          <div class="target">
            <img src="../../assets/img/target.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 选择机票 -->
      <div class="check-tiket">
        <div class="check-tiket-left">
          <!-- <div class="location">
            <img src="../../assets/img/location.png" alt="" />
            <span>北京</span>
          </div>
          <img src="../../assets/img/arrow2.png" alt="" /> -->
          <div class="city">
            <img src="../../assets/img/location.png" alt="" />
            <el-select v-model="cityName" filterable>
              <el-option
                v-for="item in city"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </div>
        </div>
        <div class="tiket-center">
          <div class="tiket-title">
            <img src="../../assets/img/air1.png" alt="" />
            <span class="ncheck-title">{{ address }}</span>
            <!-- <el-input
              v-model="address"
              placeholder="请输入出发地"
              class="ncheck-input"
            /> -->
          </div>
        </div>
        <div class="tiket-right">
          <!-- <img src="../../assets/img/date.png" alt="" /> -->
          <!-- <span>10月10日</span> -->
          <el-date-picker
            :editable="false"
            class="date"
            v-model="date"
            type="date"
            format="M月D日"
            style="width: 122px"
            :clearable="false"
          />
          <span v-if="isNowDate(date)">今天</span>
        </div>
      </div>
      <!-- 标签列表 -->
      <div class="city-list">
        <div
          class="item"
          v-for="(item, index) in citys"
          :key="index"
          @click="changeCity(item, index)"
          :class="{ active: index === currentIndex }"
        >
          <span>{{ item }}</span>
        </div>
      </div>

      <div class="btn" @click="submit">
        <span>下一步</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import Index from "../components/Index.vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import { city } from "@/utils/citys.js";
import { routerstroe } from "@/stores/routerstroe.js";

let { proxy } = getCurrentInstance();
let store = routerstroe();

let citys = ref([
  "上海",
  "广州",
  "深圳",
  "南京",
  "四川",
  "北京",
  "天津",
  "重庆",
  "香港",
  "澳门",
]);

let router = useRouter();
let address = ref("您想飞去哪里?");
let currentIndex = ref();
let cityName = ref("北京");
let date = ref(new Date());

function changeCity(item: string, index: number) {
  address.value = item;
  currentIndex.value = index;
}

function isNowDate(date) {
  let datestr = dayjs(date).format("M月D日");
  let nowDate = dayjs(new Date()).format("M月D日");
  return datestr == nowDate ? true : false;
}

function submit() {
  if (address.value === "您想飞去哪里?") {
    proxy.$modal.msg(`请输入目的地!`);
    return;
  }

  store.ticketForm = {
    date: date.value,
    fromCity: cityName.value,
    toCity: address.value,
  };

  router.push("/order_ticket_by");
}
</script>
<style scoped lang="scss">
.check-order {
  width: 100dvw;
  height: 100dvh;
  background-image: url("../../assets/img/bg2.png");
  background-size: cover;

  .content {
    width: 80vw;
    height: 70vh;
    position: absolute;
    top: 55%;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;

    .btn {
      width: 212px;
      height: 54px;
      background: #c0c8d5;
      border-radius: 27px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-top: 10%;
      span {
        width: 54px;
        height: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
        line-height: 18px;
        text-align: center;
        font-style: normal;
      }
      &:hover {
        background: #005ff9;
        transform: translateY(-2px);
        box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
        span {
          color: #ffffff;
        }
      }
    }

    .tag-list {
      // width: 80vw;
      height: 60px;
      margin-top: 2%;
      display: flex;
      justify-content: center;
      .item {
        width: 320px;
        height: 50px;
        background: #ffffff;
        border-radius: 25px;
        border: 1px solid #e4e9ef;
        margin-left: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 4px;
        padding-right: 4px;
        box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
        span {
          height: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #000000;
          line-height: 18px;
          text-align: center;
          font-style: normal;
        }
        &:hover {
          cursor: pointer;
          border: 1px solid #005ff9;
          transform: translateY(-1px);
          span {
            color: #005ff9;
          }
        }
      }
    }

    .city-list {
      width: 80vw;
      height: 60px;
      margin-top: 2%;
      display: flex;
      justify-content: center;

      .item {
        margin-left: 15px;
        width: 100px;
        height: 50px;
        background: #ffffff;
        border-radius: 25px;
        border: 1px solid #e4e9ef;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #000000;
          line-height: 18px;
          text-align: center;
          font-style: normal;
        }
        &:hover {
          border: 1px solid #005ff9;
          animation: showUp .5s 1 forwards !important;
          span {
            color: #005ff9;
          }
        }
        @keyframes showUp {
          from {
            transform: scale(1);
          }
          to{
            transform: scale(1.1);
          }
          
        }
      }
    }

    .head {
      .title {
        display: flex;
        align-items: center;

        .title-left {
          width: 287px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 65px;
          color: #000;
          line-height: 60px;
          text-align: center;
          font-style: normal;
        }
        .title-right {
          background: linear-gradient(
            0deg,
            #2d94ff 0%,
            #4414f2 48%,
            #ff5e99 100%
          );
          width: 444px;
          //   height: 80px;
          overflow-wrap: break-word;
          color: rgba(14, 255, 175, 1);
          font-size: 65px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 60px;
          margin-left: 5px;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .target {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          height: 60px;
          img {
            margin-left: 10px;
            width: 30px;
            height: 30px;
          }
        }
      }
    }

    .check-tiket {
      display: flex;
      align-items: center;
      height: 70px;
      width: 67vw;
      margin-top: 60px;
      justify-content: center;

      .check-tiket-left {
        display: flex;
        width: 200px;
        height: 60px;
        background: #ffffff;
        border-radius: 35px;
        border: 1px solid #e4e9ef;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
        margin-right: 15px;

      .city{
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 15px;
            height: 15px;
          }
      }

        .local {
          width: 120px;
        }
        .location {
          display: flex;
          align-items: center;
          img {
            width: 15px;
            height: 15px;
          }
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #000000;
            line-height: 18px;
            text-align: center;
            font-style: normal;
            margin-left: 5px;
          }
        }

        img {
          width: 15px;
          cursor: pointer;
        }
      }
      .tiket-center {
        width: 635px;
        height: 60px;
        background: #ffffff;
        box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
        border-radius: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        .tiket-title {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
          }
          .ncheck-title {
            font-family: PingFangSC, PingFang SC;
            font-size: 25px;
            color: #d3d3d3;
            line-height: 26px;
            text-align: center;
            font-style: normal;
            margin-left: 10px;
          }
        }
      }
      .tiket-right {
        width: 200px;
        height: 60px;
        background: #ffffff;
        border-radius: 35px;
        border: 1px solid #e4e9ef;
        box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        cursor: pointer;
        img {
          width: 20px;
        }
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #606266;
          line-height: 18px;
          text-align: center;
          font-style: normal;
          // margin-left: 1px;
        }
      }
    }
  }
}
.active {
  border: 1px solid #005ff9 !important;
  span {
    color: #005ff9 !important;
  }
}
:deep(.el-select__wrapper) {
  // width: 150px;
  width: 120px;
  box-shadow: none;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #000000;
  line-height: 18px;
  // text-align: center;
  font-style: normal;
  border: 0;
  box-shadow: none;
  &:hover {
    border: 0px;
    box-shadow: none;
  }
}

:deep(.date .el-input__wrapper) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #000000;
  line-height: 18px;
  text-align: center;
  font-style: normal;
  border: 0px !important;
  box-shadow: 0 0 0 0px !important;
  &:hover {
    border: 0px !important;
    box-shadow: 0 0 0 0px !important;
  }
}
</style>
